{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>监控数据展示</title>
	<link rel="stylesheet" href="{% static 'css/reset.css' %}">
	<link rel="stylesheet" href="{% static 'css/new.css' %}">
	<link rel="stylesheet" href="{% static 'css/style.css' %}">
	<script src="{% static 'js/vue.min.js' %}"></script>
	<script src="{% static 'js/jquery.min.js' %}"></script>
</head>

<body>
	<div class="bg"></div>
	<div id="stars">
		        <div class="star" style="top: 0px;left: 500px;"></div>
		    </div>

	<div class="h-container">
		<div class="h-header">
			<div class='h-header-title'>监控数据展示</div>
			<div class='h-header-right' id="dateTime">0000-00-00 00:00</div>
		</div>

		<div class="h-wrap">
			<div class="border four fl">
				<div class="border_four">
					<div class="border_two border_padding">
						<div class="border_inner">
							<span>用户数</span>
							<div class="white_num white_num_one"><font>数据请求中...</font></div>
						</div>
					</div>
				</div>
			</div>
			<div class="border four fl">
				<div class="border_four">
					<div class="border_two border_padding">
						<div class="border_inner">
							<span>主机总数</span>
							<div class="white_num white_num_two"><font>数据请求中...</font></div>
						</div>
					</div>
				</div>
			</div>
			<div class="border four fl">
				<div class="border_four">
					<div class="border_two border_padding">
						<div class="border_inner">
							<span>报警数</span>
							<div class="white_num white_num_three red"><font>数据请求中...</font></div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="h-line">
			<div class="h-item">
				<div class="h-item-title"><span>办公网流量</span></div>

				<div id="xxx" style="height:300px;" class="h-item-body">
					<div class="h-c-loading">数据请求中...</div>
				</div>
			</div>
			<div class="h-item">
				<div class="h-item-title"><span>无线网流量</span></div>

				<div id="xxx2" style="height:300px;" class="h-item-body">
					<div class="h-c-loading">数据请求中...</div>
				</div>
			</div>
		</div>

		<div class="h-line">
			<div class="h-item">
				<div class="h-item-title"><span>ceph-mon CPU使用率</span></div>
				<div id="xxx3" style="height:300px;" class="h-item-body">
					<div class="h-c-loading">数据请求中...</div>
				</div>
			</div>
			<div class="h-item">
				<div class="h-item-title"><span>wx-jenkins CPU使用率</span></div>

				<div id="xxx4" style="height:300px;" class="h-item-body">
					<div class="h-c-loading">数据请求中...</div>
				</div>
			</div>
		</div>

		<div class="h-right">
			<div class="h-item">
				<div class="h-item-title"><span>服务器分组数量</span></div>
				<div id="pie1" style="height:390px;" class="h-item-body">
					<div class="h-c-loading">数据请求中...</div>
				</div>
			</div>
			<div class="h-item">
				<div class="h-item-title"><span>TOP5报警主机</span></div>
				<div id="pie2" style="height:390px;" class="h-item-body">
					<div class="h-c-loading">数据请求中...</div>
				</div>
			</div>
		</div>
	</div>

	<script src="{% static 'js/echarts.min.js' %}"></script>
	<script src="{% static 'js/flipclock.js' %}"></script>
	<script src="{% static 'js/start.js' %}"></script>
	<script src="{% static 'js/api.js' %}"></script>
	<script src="{% static 'js/echart_line.js' %}"></script>
	<script src="{% static 'js/echart_pie.js' %}"></script>
	<script src="{% static 'js/flipNum.js' %}"></script>
	<script>
		var time = function (q) {
			q.text(dateFormat(new Date()));
			setInterval(function () {
				q.text(dateFormat(new Date()));
			}, 60 * 1000);
		};

		time($("#dateTime"));
		flipNumInit(10);
		starting(document.getElementById('stars'), 'star', 60);
		chartLine(document.getElementById("xxx"),  'network', setInterval1);
		chartLine(document.getElementById("xxx2"), 'network', setInterval2, '2');
		chartLine2(document.getElementById("xxx3"), 'CPU', setInterval3);
		chartLine2(document.getElementById("xxx4"), 'CPU', setInterval3, '2', 'blue');

		peiTuInit(document.getElementById("pie1"), 'top5group');
		peiTuInit2(document.getElementById("pie2"), 'top5event');
	</script>
</body>

</html>